<template>
  <div class="edit_div" v-html="innerText" :contenteditable="canEdit" @focus="isLocked = true" @blur="isLocked = false" @input="changeText">
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  name: "editDiv",
  props: {
    value: {
      type: String,
      default: ""
    },
    canEdit: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      innerText: this.value,
      isLocked: false
    }
  },
  watch: {
    value(val) {
      console.log(val)
      if (!this.isLocked || !this.innerText) {
        this.innerText = this.value
      }
    }
  },
  methods: {
    changeText() {
      this.$emit("input", this.$el.innerHTML)
    }
  }
}
</script>


<style lang="less">
.edit_div {
  background: #fff;
  width: 1099px;
  font-size: 14px;
  color: #4c4c4c;
  min-height: 320px;
  resize: none;
  outline: none;
  border: 1px solid #c9ddfd;
  padding: 15px;
  font-weight: 700;
  display: inline-block;
}
</style>
